 /*
 * @description: 客服系统会话设置/会话超时设置
 * @Author: along
 * @Date: 2020-09-25
 * @Last Modified by: along
 * @Last Modified time: 2020-09-25
 */
<template>
    <div class="dely customdely">
        <div class="wrap">
            <p class="wrap-head">
                客服超时时间设置
            </p>
            <p class="wrap-title">客服超时时间</p>
            <div class="wrap-input">
                <el-input
                    placeholder="请输入客服超时时间"
                    v-model="formData.server_timeout_min"
                    size="medium"
                    :style="{width: '332px', marginBottom: '20px'}"
                />
                <p class="wrap-input-text">分钟</p>
            </div>
            <p
                class="wrap-head"
                :style="{borderBottom: 'none'}"
            >
                客服超时时间
                <span>该提示将会在会话关闭前3分钟发送给客服，用户不可见</span>
            </p>
            <el-input
                type="textarea"
                placeholder="请输入客服超时时间回复内容"
                v-model="formData.server_timeout_text"
                maxlength="100"
                :autosize="{ minRows: 4, maxRows: 6}"
                show-word-limit
                :style="{marginBottom: '40px'}"
            />
            <p class="wrap-head">
                客户超时时间设置
            </p>
            <p class="wrap-title">客户超时时间</p>
            <div class="wrap-input">
                <el-input
                    placeholder="请输入客服超时时间"
                    v-model="formData.customer_timeout_min"
                    size="medium"
                    :style="{width: '332px', marginBottom: '20px'}"
                />
                <p class="wrap-input-text">分钟</p>
            </div>
            <p
                class="wrap-head"
                :style="{borderBottom: 'none'}"
            >
                客户超时时间
                <span>该提示将会在会话关闭前2分钟发送给用户</span>
            </p>
            <el-input
                type="textarea"
                placeholder="请输入客服超时时间回复内容"
                v-model="formData.customer_timeout_text"
                maxlength="100"
                :autosize="{ minRows: 4, maxRows: 6}"
                show-word-limit
                :style="{marginBottom: '40px'}"
            />
        </div>
        <div class="foot">
            <el-button
                size="small"
                type="default"
                :style="{width: '120px', height: '36px', margin: '0 32px 0 96px'}"
                @click="fnRest()"
            >
                重置
            </el-button>
            <el-button
                size="small"
                type="primary"
                :style="{width: '120px', height: '36px'}"
                @click="fnSubmit()"
            >
                确定
            </el-button>
        </div>
    </div>
</template>

<script>
const dely = {
    server_timeout_min: 30,
    server_timeout_text: '由于长时间没有回复客户的咨询，系统将自动结束会话',
    customer_timeout_min: 30,
    customer_timeout_text: ''
};

export default {
    data () {
        return {
            formData: {
                welcome_text: '',
                auto_reply_text: '',
                keyword_reply: [{
                    keyword: '',
                    reply: ''
                }],
                server_timeout_min: '',
                server_timeout_text: '',
                customer_timeout_min: '',
                customer_timeout_text: ''
            }
        };
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{ title: "客服系统"},{title: '会话超时设置'}]);
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.$post('/student/customer_service_zsdx_config%5Cget',{},resp=>{
                if (resp.code == 1) {
                    this.formData = {
                        ...resp.data
                    };
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 提交数据
         */
        fnSubmit () {
            if(this.formData['server_timeout_min'] == '') {
                this.$notify({
                    title: '提示',
                    message: '客服超时时间不可以为空',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            if(this.formData['server_timeout_text'] == '') {
                this.$notify({
                    title: '提示',
                    message: '客服超时时间发送内容不可以为空',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            if(this.formData['customer_timeout_min'] == '') {
                this.$notify({
                    title: '提示',
                    message: '客户超时时间不可以为空',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            if(this.formData['customer_timeout_text'] == '') {
                this.$notify({
                    title: '提示',
                    message: '客户超时时间发送内容不可以为空',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(!/^\d+$/.test(this.formData.server_timeout_min)) {
                this.$notify({
                    title: '提示',
                    message: '请输入正确的客服超时时间',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(!/^\d+$/.test(this.formData.customer_timeout_min)) {
                this.$notify({
                    title: '提示',
                    message: '请输入正确的客户超时时间',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }


            const data = {
                ...this.formData,
            };

            // console.log('data', data);

            this.$post('/student/customer_service_zsdx_config%5Cset',{
                ...data,
                keyword_reply: JSON.stringify(this.formData.keyword_reply)
            },resp=>{
                if (resp.code == 1) {
                    this.init();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });

        },

        /**
         * @description 重置
         */
        fnRest () {
            this.$set(this.formData, 'server_timeout_min', 30);
            this.$set(this.formData, 'server_timeout_text', '由于长时间没有回复客户的咨询，系统将自动结束会话');
            this.$set(this.formData, 'customer_timeout_min', 30);
            this.$set(this.formData, 'customer_timeout_text', '您好，我们长时间没有收到您的回复，稍后系统将自动结束本次会话。如还需帮助，欢迎随时联系我们。');

            this.fnSubmit();
        }
    }
};
</script>

<style lang="less" scoped>
.dely {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    .wrap {
        flex: 1;
        background: #FBFBFB;
        box-sizing: border-box;
        padding: 18px 32px 32px 32px;
        border: 1px solid #EEEEEE;
        .wrap-head {
            height: 38px;
            display: flex;
            align-items: center;
            color: #333333;
            font-weight: 500;
            box-sizing: border-box;
            border-bottom: 1px #E9E9E9 solid;
            &>span {
                padding-left: 10px;
                color: #999999;
                font-size: 14px;
            }
        }
        .wrap-title {
            color: #333333;
            font-size: 14px;
            margin: 24px 0 12px 0;
        }
        .wrap-input {
            display: flex;
            align-items: center;
            .wrap-input-text {
                color: #C2C2C2;
                font-size: 14px;
                position: relative;
                left: -38px;
                z-index: 10;
                top: -8px;
            }
        }
        .wrap-list {
            width: 760px;
            display: flex;
            margin-left: 32px;
            margin-bottom: 24px;
            .list {
                width: 664px;
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                box-sizing: border-box;
                padding: 32px;
                .list-title {
                    color: #333333;
                    font-size: 14px;
                    margin-bottom: 12px;
                }
            }
            .list-button {
                width: 80px;
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                justify-content: center;
                align-items: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-left: 16px;
                cursor: pointer;
                .el-icon-hand-shanchu1 {
                    color: #666666;
                    font-size: 16px;
                    margin-bottom: 10px;
                }
                &>p {
                    color: #666666;
                    font-size: 14px;
                }
            }
        }
        .add {
            width: 760px;
            height: 36px;
            border-radius: 4px;
            border: 2px dashed #20A0FF;
            margin-top: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #20A0FF;
            font-size: 14px;
            font-weight: 500;
            margin-left: 32px;
            cursor: pointer;
            &>i {
               color: #20A0FF;
               font-size: 15px;
               font-weight: 500;
               margin-right: 10px;
            }
        }
    }
    .foot {
        height: 36px;
        margin-top: 32px;
        background: #ffffff;
        display: flex;
        align-items: center;
    }
}
</style>

<style lang="less">
.customdely {
    .el-textarea__inner {
        color: #333333;
        resize: none;
        min-height: 90px;
    }
}
</style>